import { TitleGrid } from '@/stores/definitions-base';
import { t } from '@lingui/macro';
import React from 'react';
import { FieldsGrid } from './stores/definitions';
import CompareList from './CompareList';
import { observer } from 'mobx-react-lite';
import { Tab } from '@alifd/next';

const ChangeConfirm = (props) => {
  const { form, editCtx, step, isPreview } = props;
  const tasks = toJS(form.formData?.taskInfo) || [];
  const originData = toJS(editCtx.origin);

  const compareListDom = tasks.map((task, index) => {
    return (
      <CompareList
        step={step}
        taskId={task?.taskId}
        form={form}
        curTask={task}
        curOrder={form.formData}
        index={index}
        originTask={originData.taskInfo[index]}
        originOrder={originData}
      />
    );
  });

  const tabItems = tasks.map((info, index) => {
    const suf = String.fromCharCode((65 + index));
    return ({
      tab: t`${suf}段承运信息`,
      key: `${suf}-${index}-Tab`,
      content: compareListDom[index],
    });
  });

  return (
    <>
      <TitleGrid title={t`订单信息`} />
      <FieldsGrid
        formData={form.formData}
        mode={isPreview ? 'view' : 'edit'}
        fields={['priceDifference']}
      />
      {tasks.length > 1 ?
        <Tab>
          {tabItems.map(item => (
            <Tab.Item key={item.key} title={item.tab}>
              {item.content}
            </Tab.Item>
          ))}
        </Tab>
        :
        compareListDom[0]
      }
    </>
  );
};

export default observer(ChangeConfirm);
